<template>
	<div class="app-container">
     <el-row style="margin:15px auto">
      <el-col :span="6">
        <el-card class="box-card">
          <p>用户总收入</p>
          {{theIcome.price}}元
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <p>今日收入</p>
          {{theIcome.today}}元
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <p>本周收入</p>
          {{theIcome.week}}元
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <p>本月收入</p>
          {{theIcome.month}}元
        </el-card>
      </el-col>
    </el-row>
    <div class="filter-container c-flex-row c-aligni-center c-justify-sb">
			<el-form class="form-container">
        <div class="margin-b10">
          <el-input @keyup.enter.native="handleFilter" v-model="listQuery.consumerName" clearable placeholder="搜索消费者" style="width: 200px;"></el-input>
          <el-input @keyup.enter.native="handleFilter" v-model="listQuery.userName" clearable placeholder="搜索受益人" style="width: 200px;"></el-input>
          <el-input @keyup.enter.native="handleFilter" v-model="listQuery.consumerMobile" clearable placeholder="搜索消费者手机号" style="width: 200px;"></el-input>
          <el-input @keyup.enter.native="handleFilter" v-model="listQuery.userMobile" clearable placeholder="搜索受益人手机号" style="width: 200px;"></el-input>
        </div>
        <el-date-picker type="date" :editable="false" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="开始时间（开始）" v-model="listQuery.apply_time" style="width: 180px;">
        </el-date-picker><span style="padding: 0 10px;font-size: 12px;color: #666;">到</span>
        <el-date-picker type="date" :editable="false" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="开始时间（结束）" v-model="listQuery.end_time" style="width: 180px;">
        </el-date-picker>

				<el-button type="primary" icon="el-icon-search" @click="handleFilter"  class="search">搜索</el-button>
				<el-button @click="handleDownload">导出Excel</el-button>
	    </el-form>
		</div>
    <!-- <code>
      <svg-icon icon-class="message" style="margin-right:10px;color:red;font-size:20px;"></svg-icon>
      用户总收入：{{Income}}元
    </code> -->
		<div>
			<el-table :data="tableData" row-key="id" v-loading="listLoading" element-loading-text="加载中..." fit highlight-current-row :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" class="table c-width100 color-222 family-PingFangSC-Regular font-s12">
          <el-table-column align="center" label="消费者">
            <template slot-scope="scope">
              <img v-if="scope.row.consumerId!=''":src="scope.row.uchead != null && scope.row.uchead != '' ? scope.row.uchead : require('../../../assets/default_head.png')" style="width:40px;height:40px;border-radius:100%;vertical-align:middle;">
              <div>{{scope.row.consumer}}</div>
              <div v-if='scope.row.consumerId!=""'>（ID：{{scope.row.consumerId}}）</div>
            </template>
			    </el-table-column>
          <el-table-column align="center" label="消费者手机号">
            <template slot-scope="scope">
              <span>{{scope.row.ucMobile}}</span>
            </template>
			    </el-table-column>
			    <el-table-column align="center" label="受益人">
			        <template slot-scope="scope">
                <img :src="scope.row.uhead" style="width:40px;height:40px;border-radius:100%;vertical-align:middle;">
			          <br><span>{{scope.row.nickname}}<br>（ID：{{scope.row.userId}}）</span>
			        </template>
			    </el-table-column>
          <el-table-column align="center" label="受益人手机号">
            <template slot-scope="scope">
              <span>{{scope.row.uMobile}}</span>
            </template>
			    </el-table-column>
          <el-table-column align="center" label="订单号">
            <template slot-scope="scope">
              <span>{{scope.row.orderNo}}</span>
            </template>
			    </el-table-column>
          <el-table-column width="100" align="center" label="金额">
			        <template slot-scope="scope">
			          <span>{{scope.row.amount}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column align="center" width="100" label="类型">
			        <template slot-scope="scope">
                <span v-if="scope.row.type == 1">购买VIP</span>
                <span v-if="scope.row.type == 2">升级VIP</span>
                <span v-if="scope.row.type == 3">升级VIP2</span>
                <span v-if="scope.row.type == 4">升级svip</span>
                <span v-if="scope.row.type == 5">购买课程</span>
                <span v-if="scope.row.type == 6">购买分类</span>
                <span v-if="scope.row.type == 7">活动付费</span>
                <span v-if="scope.row.type == 8">资料购买</span>
                <span v-if="scope.row.type == 9">购买栏目</span>
                <span v-if="scope.row.type == 10">社群购买</span>
                <span v-if="scope.row.type == 11">购买测评</span>
                <span v-if="scope.row.type == 12">商城购买</span>
                <span v-if="scope.row.type == 13">独立商城</span>
                <span v-if="scope.row.type == 20">余额利息</span>
                <span v-if="scope.row.type == 22">购买VIP2</span>
                <span v-if="scope.row.type == 23">购买SVIP</span>
                <span v-if="scope.row.type == 24">赠送专栏</span>
			        </template>
			    </el-table-column>
			    <el-table-column  align="center" label="创建时间">
			        <template slot-scope="scope">
			          <div>{{scope.row.createdAt.split(" ")[0]}}</div>
                <div>{{scope.row.createdAt.split(" ")[1]}}</div>
			        </template>
			    </el-table-column>
		   </el-table>
		   <div class="block text-c">
				<!--分页组件 current-page:当前页   -->
				<!--   page-sizes:每页几条数据（选项）   -->
				<!--   page-size:每页几条数据   -->
				<!--   total:总条数   -->
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="listQuery.page"
			      :page-sizes="[15, 20, 25, 30]"
			      :page-size="15"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="listQuery.total">
			    </el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
import { getIncomeList } from '@/api/finance'
export default {
  data() {
    return {
      listQuery: {
        apply_time: null,
        end_time: null,
        consumerName: null,
        userName: null,
        consumerMobile: null,
        userMobile: null,
        currentPage: 1, // 当前页
        total: null, // 数据总条数
        page: 1
      },
      tableData: [],
      Income: null,
      listLoading: false,
      companyId: null,
      URLAPI: process.env.BASE_API,
      theIcome:{}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getIncomeList(this.listQuery).then(res => {
        console.log('用户收入', res.data.data.list.data)
        this.tableData = res.data.data.list.data
        this.listQuery.total = res.data.data.list.total
        this.Income = res.data.data.Income
        this.companyId = res.data.data.companyId
        this.theIcome = res.data.data.data
        this.listLoading = false
      }).catch(err => {
        console.log(err)
      })
    },
    handleSizeChange(val) { // 切换每页几条数据方法
      // console.log(`每页 ${val} 条`)
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) { // 切换当前页
      // console.log(`当前页: ${val}`)
      this.listQuery.page = val
      this.getList()
    },
    handleDownload() {
      var form = ''
      if (this.listQuery.apply_time) {
        form += '&apply_time=' + this.listQuery.apply_time
      }
      if (this.listQuery.end_time) {
        form += '&end_time=' + this.listQuery.end_time
      }
      if (this.listQuery.consumerName) {
        form += '&consumerName=' + this.listQuery.consumerName
      }
      if (this.listQuery.userName) {
        form += '&userName=' + this.listQuery.userName
      }
      if (this.listQuery.userMobile) {
        form += '&userMobile=' + this.listQuery.userMobile
      }
      window.open(this.URLAPI + '/excel/excelIncomeLists?companyId=' + this.companyId + form)
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    }
  }
}
</script>

<style scoped>
</style>
